<!-- 选群组 -->
<template>
  <a-modal
    :width="960"
    :body-style="{ height: '520px', paddingBottom: '0' }"
    wrap-class-name="common-content group-select-content vxe-table--ignore-clear"
    :centered="true"
    :open="visible"
    :destroy-on-close="false"
    :mask-closable="false"
    @cancel="handleClose"
  >
    <div class="popup-title">
      <h2>
        {{ title }}
        <a-tooltip v-if="titleTips" placement="top">
          <template #title>
            <span>{{ titleTips }}</span>
          </template>
          <avic-icon svg="avic-question-fill" />
        </a-tooltip>
      </h2>
    </div>
    <div class="commonselect-container-box popup-content">
      <div class="container-left">
        <div class="v-select">
          <a-select
            v-if="orgList.length > 0"
            v-model:value="orgSelectId"
            placeholder="当前组织"
            :show-search="true"
            option-filter-prop="children"
            :filter-option="filterOption"
            @change="handleChange"
          >
            <a-select-option v-for="item in orgList" :key="item.id" :value="item.id">
              {{ item.orgName }}
            </a-select-option>
          </a-select>
          <a-input-search
            ref="searchInput"
            v-model="searchText"
            :class="{ 'only-search': orgList.length == 0 }"
            :placeholder="searchPlaceholder"
            :allow-clear="true"
            @search="handleSearch"
          />
        </div>
        <div class="container-checkbox">
          <s-table
            v-model:pagination="pagination"
            row-key="id"
            :row-height="36"
            :bordered="false"
            :show-header="false"
            :scroll="{ y: 380 }"
            :columns="columns"
            :data-source="tableData"
            :row-selection="{
              type: selectModel != 'single' ? 'checkbox' : 'radio',
              selectedRowKeys: selectedRowKeys,
              onSelect: onSelectChange,
              columnWidth: selectModel != 'single' ? 32 : 0
            }"
            :custom-row="
              (record) => {
                return {
                  onClick: () => {
                    handleRowSelection(record);
                  },
                  onDblclick: () => {
                    handleRowDblClick(record);
                  }
                };
              }
            "
            @change="handleTableChange"
          >
            <template #bodyCell="{ record }">
              <span class="user-icon">
                <avic-icon svg="avic-group-line" class="tree-icon group-icon" />
              </span>
              <span class="cell-txt" :title="record['groupName']">
                <span>{{ record['groupName'] }}</span>
              </span>
            </template>
          </s-table>
        </div>
      </div>
      <div class="container-right">
        <div class="container-right-top">
          已选{{ name + ` (` + selectLength + `)` }}
          <delete-outlined class="total-delete-icon" title="清空" @click="handleDelSelectedTotal" />
        </div>
        <div class="checkgroup">
          <s-table
            row-key="id"
            :columns="selectListColumns"
            :data-source="select"
            :show-header="false"
            :scroll="{ y: 380 }"
            :row-height="36"
            :pagination="false"
            row-drag="true"
          >
            <template #bodyCell="{ column, text, record }">
              <template v-if="column.key === 'groupName'">
                <span class="" :title="text + (record.orgIdentityName ? '(' + record.orgIdentityName + ')' : '')">
                  <avic-icon svg="avic-group-line" class="tree-icon group-icon" />
                  {{ text }}
                  <span style="color: #86909c">
                    {{ record.orgIdentityName ? '(' + record.orgIdentityName + ')' : '' }}
                  </span>
                </span>
                <span class="checkclose" title="删除" @click="handleDelSelectedItem(record)">
                  <avic-icon svg="avic-close-fill" style="font-size: 1.3em" />
                </span>
              </template>
            </template>
          </s-table>
        </div>
      </div>
    </div>
    <template #footer>
      <a-button title="确认" type="primary" @click="confirm">确认</a-button>
      <a-button title="取消" type="primary" ghost @click="handleClose">取消</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { searchOrgName, selectOrgName, httpRequest } from './api';
const { proxy } = getCurrentInstance();
// 群组列
const groupColumns = [
  {
    title: '群组名称',
    dataIndex: 'groupName',
    key: 'title'
  }
];
const selectListColumns = ref([
  {
    title: '已选群组',
    align: 'left',
    dataIndex: 'groupName',
    key: 'groupName'
  }
]);

const props = defineProps({
  /** 是否显示 */
  show: { type: Boolean, required: true, default: false },
  /** 右侧列表已选标题文案 */
  name: { type: String, default: '群组' },
  /** 标题 */
  title: { type: String, default: '群组选择' },
  /** 辅助提示信息 */
  titleTips: { type: String, default: '' },
  /** 搜索提示 */
  searchPlaceholder: { type: String, default: '请输入群组名称' },
  /** 单选 single ，多选 multi */
  selectModel: { type: String, required: false, default: 'single' },
  /** 多选最多选择数量 */
  maxSelect: { type: Number, required: false, default: 0 },
  /** 默认选中项 */
  defaultValue: { type: Object, required: false, default: null },
  /** 双向绑定改变事件 */
  modelChange: { type: [Object, String], required: false, default: null },
  /** 组织范围 */
  viewScope: { type: String, required: false, default: '' },
  /** 应用id */
  appId: { type: String, required: false, default: '' },
  /** 默认加载指定组织id */
  defaultOrgId: { type: String, required: false, default: '' },
  /** 组织id */
  orgId: { type: String, required: false, default: '' },
  /** 群组请求接口url */
  groupUrl: { type: String, default: '/appsys/common/select/getInitGroupInfo/v1' },
  /** 群组请求接口method */
  groupMethodType: { type: String, default: 'POST' },
  /** 获取初始化群组的组织信息请求地址 */
  getInitGroupInfoUrl: { type: String, default: '/appsys/common/select/getSelectedGroupInfo/v1' },
  /** 获取初始化群组的组织信息请求类型 */
  getInitGroupInfoMethod: { type: String, default: 'post' }
});
const {
  show,
  name,
  title,
  titleTips,
  searchPlaceholder,
  selectModel,
  maxSelect,
  modelChange,
  viewScope,
  appId,
  defaultOrgId,
  orgId,
  groupUrl,
  groupMethodType,
  getInitGroupInfoUrl,
  getInitGroupInfoMethod
} = toRefs(props);
const data = reactive({
  visible: false, // 弹窗显示与否
  orgSelect: {}, // 选中组织
  orgSelectId: '',
  orgList: [], // 组织列表
  searchText: '', // 搜索内容
  defaultSelectedRows: [], // 默认选择框选中的值
  localOrgId: '',
  tableRefName: 'groupSelectTable', // 表格ref名称
  page: '1', // 初始请求第几页
  rows: '20', // 初始每页请求几条数据
  sord: 'asc',
  columns: [], // 表格列配置
  tableData: [], // 表格数据
  dataIndex: 'groupName',
  select: [], // 右侧区域列表
  selectLength: 0, // 右侧区域列表长度
  selectedRowKeys: [] // 右侧表格选中项
});
const {
  visible,
  orgSelect,
  orgSelectId,
  orgList,
  searchText,
  defaultSelectedRows,
  localOrgId,
  sord,
  columns,
  tableData,
  select,
  selectLength,
  selectedRowKeys
} = toRefs(data);
const pagination = ref({
  current: 1,
  pageSize: 10,
  hideOnSinglePage: true,
  total: 0,
  position: ['bottomLeft']
});

/**
 * 最多选择的数量
 */
const maxSelectNumber = computed(() => {
  let maxSelectNumber = 0;
  if (maxSelect.value > 0) {
    maxSelectNumber = maxSelect.value;
  }
  return maxSelectNumber;
});
const searchInput = ref(null);
watch(
  select,
  (newV) => {
    selectLength.value = newV.length;
  },
  { immediate: true }
);
watch(
  show,
  (newV) => {
    visible.value = newV;
    if (newV === true) {
      nextTick(() => {
        searchInput.value?.focus();
      });
      init();
    }
  },
  { immediate: true }
);

watch(
  orgId,
  (newV) => {
    localOrgId.value = newV;
  },
  { immediate: true }
);
watch(
  () => props.defaultValue,
  (newV) => {
    if (newV) {
      loadingDefaultData(newV);
    }
  }
);
/** 双向绑定，处理回填数据 */
watch(
  modelChange,
  (newV: any) => {
    if (newV && newV.ids) {
      const ids = newV.ids.split(';');
      const names = newV.names.split(';');
      const orgIdentitys = newV.orgIdentitys ? newV.orgIdentitys.split(';') : [];
      const orgIdentityNames = newV.orgIdentityNames ? newV.orgIdentityNames.split(';') : [];
      if (orgIdentityNames.length === 0) {
        httpRequest(getInitGroupInfoUrl.value, ids, getInitGroupInfoMethod.value)
          .then((res) => {
            if (res.data) {
              res.data.map((item) => {
                defaultSelectedRows.value.push({
                  id: item.id,
                  groupName: item.name,
                  orgIdentity: item.orgIdentity,
                  orgIdentityName: item.orgIdentityName
                });
                return item;
              });
              setSelect(false);
            }
          })
          .catch(() => {
            for (let i = 0; i < ids.length; i++) {
              defaultSelectedRows.value.push({
                id: ids[i],
                groupName: names[i],
                orgIdentity: '',
                orgIdentityName: ''
              });
            }
            setSelect(false);
          });
      } else {
        for (let i = 0; i < ids.length; i++) {
          defaultSelectedRows.value.push({
            id: ids[i],
            groupName: names[i],
            orgIdentity: orgIdentitys[i],
            orgIdentityName: orgIdentityNames[i]
          });
        }
        setSelect(false);
      }
    }
  },
  { immediate: true, deep: true }
);

const $emit = defineEmits(['close', 'callBack', 'defaultBack']);

/**
 * 初始化函数
 */
function init() {
  findSearchOrgName();
  if (!props.modelChange.ids) {
    empty();
  }
}

/**
 * 请求表格数据
 */
function initTable() {
  findInitGroupInfo(null);
}

/**
 * 下拉框filterOption
 */
function filterOption(input, option) {
  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
}

/**
 * 下拉框改变切换组织
 */
function handleChange(value) {
  const orgObj = orgList.value.filter((item) => item.id === value)[0];
  localOrgId.value = orgObj.id;
  initTable();
}

/**
 * 输入框搜索事件
 */
function handleSearch(value) {
  searchText.value = value;
  findInitGroupInfo(() => {
    // 请求表格数据
    const selectIds = [];
    for (let i = 0; i < select.value.length; i++) {
      selectIds.push(select.value[i].id);
    }
  });
}

/**
 * 当手动勾选并且值发生改变时触发的事件
 */
function onSelectChange(record, selected, selectedRows) {
  if (selectModel.value === 'multi') {
    const selectIds = [...selectedRowKeys.value];
    if (selected) {
      // 选中
      if (!selectIds.includes(record.id)) {
        if (maxSelectNumber.value > 0 && selectIds.length > maxSelectNumber.value - 1) {
          proxy.$message.warning(`已设置最多选择${maxSelectNumber.value}个角色！`);
        } else {
          select.value.push(record);
        }
      }
    } else {
      // 取消选中
      if (selectIds.includes(record.id)) {
        select.value = select.value.filter((item) => item.id !== record.id);
      }
    }
    select.value = [...select.value];
  } else {
    select.value = selectedRows;
  }
  setSelectRows();
}
/**
 * 点击行实现选中
 */
function handleRowSelection(record) {
  const selectIds = [...selectedRowKeys.value];
  if (selectModel.value === 'multi') {
    // 多选
    if (!selectIds.includes(record.id)) {
      // 选中
      if (maxSelectNumber.value > 0 && selectIds.length > maxSelectNumber.value - 1) {
        proxy.$message.warning(`已设置最多选择${maxSelectNumber.value}个角色！`);
      } else {
        select.value.push(record);
      }
    } else {
      // 取消选中
      select.value = select.value.filter((item) => item.id !== record.id);
    }
    select.value = [...select.value];
  } else {
    if (!selectIds.includes(record.id)) {
      select.value = [record];
    } else {
      select.value = [];
    }
  }
  setSelectRows();
}

/**
 * 表格行双击
 */
function handleRowDblClick(row) {
  if (selectModel.value !== 'multi') {
    select.value = [row];
    setSelectRows();
    const result = getResult();
    $emit('callBack', result, select.value);
    visible.value = false;
  }
}

/**
 * 接收并处理分页、排序信息
 * @pagination,  分页信息
 * @filters, 过滤信息
 * @sorter,  排序信息
 * @obj { action: 'paginate' | 'sort' | 'filter' } 操作类型
 */
function handleTableChange(paginationInfo, _, sorter) {
  pagination.value.current = paginationInfo.current; // 页数
  pagination.value.pageSize = paginationInfo.pageSize; // 每页条数
  // 处理排序信息
  if (sorter) {
    sord.value = sorter.sord || ''; // 排序方式: desc降序 asc升序
  }
  initTable();
}

/**
 * 右侧区域列表单独删除
 */
function handleDelSelectedItem(item) {
  const list = [];
  const selectIds = [];
  for (let i = 0; i < select.value.length; i++) {
    if (select.value[i].id !== item.id) {
      list.push(select.value[i]);
      selectIds.push(select.value[i].id);
    }
  }
  select.value = [...list];
  setSelectRows();
}

/**
 * 右侧区域列表批量删除
 */
function handleDelSelectedTotal() {
  empty();
}

/**
 * 设置右侧区域列表合集
 */
function setSelectRows() {
  const ids = [];
  const list = [...select.value];
  for (let i = 0; i < list.length; i++) {
    ids.push(list[i].id);
  }
  selectedRowKeys.value = ids;
}

/** 清空选中数据 */
function empty() {
  select.value = []; // 选择的列
  setSelectRows();
}

function findSelectOrgName() {
  selectOrgName(viewScope.value, defaultOrgId.value)
    .then((res) => {
      if (res.data) {
        orgList.value = res.data;
        if (res.data.length > 0) {
          if (!localOrgId.value) {
            localOrgId.value = res.data[0].id;
          }
          orgSelect.value.id = res.data.filter((tim) => tim.id === localOrgId.value)[0].id;
          orgSelectId.value = orgSelect.value.id;
        }
      }
      initTable();
    })
    .catch(() => {
      initTable();
    });
}

/** 获取默认选中组织 */
function findSearchOrgName() {
  if (orgSelect.value.length > 0) {
    return;
  }
  searchOrgName('', viewScope.value, defaultOrgId.value)
    .then((res) => {
      if (res.data) {
        if (!defaultOrgId.value) {
          localOrgId.value = res.data.orgId;
          orgSelect.value.orgId = res.data.orgId;
        }
      }
      findSelectOrgName();
    })
    .catch(() => {
      findSelectOrgName();
    });
}

/** 加载默认值 判断是否需要去查询数据库 */
function loadingDefaultData(value) {
  if (value) {
    let isLoading = false;
    if (typeof value.ids === 'undefined') {
      const ids = `${value}`.split(';');
      for (let i = 0; i < ids.length; i++) {
        defaultSelectedRows.value.push({
          id: ids[i],
          groupName: '',
          orgIdentity: '',
          orgIdentityName: ''
        });
      }
      isLoading = true;
    } else {
      let ids = [];
      let names = [];
      let orgIdentitys = [];
      let orgIdentityNames = [];
      if (value.ids) {
        ids = `${value.ids}`.split(';');
      }
      if (value.names) {
        names = value.names.split(';');
      }
      if (value.orgIdentitys) {
        orgIdentitys = value.orgIdentitys.split(';');
      }
      if (value.orgIdentityNames) {
        orgIdentityNames = value.orgIdentityNames.split(';');
      }
      if (ids.length > 0 && ids.length !== names.length) {
        isLoading = true;
      }
      for (let i = 0; i < ids.length; i++) {
        defaultSelectedRows.value.push({
          id: ids[i],
          groupName: names[i],
          orgIdentity: orgIdentitys[i],
          orgIdentityName: orgIdentityNames[i]
        });
      }
    }
    if (isLoading) {
      findInitGroupInfo(() => {
        setSelect(true);
      });
    }
  }
}

/** 设置默认选中 */
function setSelect(isCallBack = false) {
  if (defaultSelectedRows.value) {
    defaultSelectedRows.value.map((item) => {
      const noSelect = select.value.filter((tim) => tim.id === item.id);
      // 判断是否已经在已选中元素中
      if (noSelect.length === 0) {
        select.value.push(item);
      }
      return item;
    });
    const selectIds = [];
    select.value.map((item) => {
      selectIds.push(item.id);
      return item;
    });
    selectedRowKeys.value = selectIds;
    defaultSelectedRows.value = [];
  }
  if (isCallBack) {
    const result = getResult();
    setTimeout(() => {
      $emit('defaultBack', result);
    }, 100);
  }
}

function getList() {
  const param = {
    url: groupUrl.value,
    parameter: {
      searchText: searchText.value,
      viewScope: viewScope.value,
      defaultOrgId: defaultOrgId.value,
      orgId: localOrgId.value,
      appId: appId.value,
      rows: pagination.value.pageSize,
      page: pagination.value.current,
      sord: sord.value
    },
    method: groupMethodType.value
  };
  return new Promise((resolve) => {
    httpRequest(param.url, param.parameter ? param.parameter : '', param.method)
      .then((res) => {
        if (res.data.result.length > 0) {
          tableData.value = [...res.data.result];
        } else {
          tableData.value = [];
        }
        pagination.value.total = res.data.pageParameter.totalCount;
        resolve(res.data.result);
      })
      .catch(() => {
        resolve(null);
      });
  });
}

/** 加载群组列表 */
function findInitGroupInfo(success) {
  columns.value = groupColumns;
  getList().then((res) => {
    if (res && success) {
      success(res);
    }
  });
}

/**
 * 加工返回数据
 */
function getResult() {
  let ids = '';
  let names = '';
  let orgIdentitys = '';
  let orgIdentityNames = '';
  if (select.value && select.value.length > 0) {
    select.value.map((res, i) => {
      if (i > 0) {
        ids += ';';
        names += ';';
        orgIdentitys += ';';
        orgIdentityNames += ';';
      }
      ids += res.id;
      names += res.groupName;
      orgIdentitys += res.orgIdentity;
      orgIdentityNames += res.orgIdentityName;
      return res;
    });
  }
  const result = { ids, names, orgIdentitys, orgIdentityNames };
  return result;
}

/**
 * 确定
 */
function confirm() {
  const result = getResult();
  if (result.ids) {
    $emit('callBack', result);
  } else {
    $emit('callBack', {});
  }
  visible.value = false;
}

/**
 * 取消
 */
function handleClose() {
  visible.value = false;
  $emit('close');
}
</script>
